<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">Consulta Citas</ui:define>

    <ui:define name="java_script">
    </ui:define>   

    <ui:define name="contenido">
        <h:outputText value="#{label['consulta.citas']}" class="encabezado"/>        
        <hr id="horizontalLine" style="width: 790px; margin-left: 20px"/> 
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:tabView effect="slide" effectDuration="normal">                                    

                <p:tab title="Citas Anteriores" >

                    <p:fieldset id="fiel_ant" legend="Datos Consulta">
                        <p:panelGrid>
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['plan.pago']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_plan_ant" value="#{beanConsultaCitas.planAnt}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_planes}"  
                                                       var="pago" itemLabel="#{pago.nombre}" itemValue="#{pago.id_plan_pago}"/>           
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>           
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['especialidades']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_espe_ant" value="#{beanConsultaCitas.especialidadAnt}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_especialidades}"  
                                                       var="espe" itemLabel="#{espe.nombre}" itemValue="#{espe.id_especialidad}"/>          
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>                                   
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                                </p:column>  
                                <p:column>
                                    <p:selectOneMenu id="id_estado_ant" 
                                                     effect="fold"
                                                     style="width: 150px;"
                                                     value="#{beanConsultaCitas.estadoAnt}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado_cita}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>      
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['fecha']}" />               
                                </p:column>
                                <p:column>
                                    <p:calendar style="width:10px" id="input_fecha_ant" maxdate="#{beanConsultaCitas.fecha_minima}"
                                                readonlyInput="true" value="#{beanConsultaCitas.fechaAnt}" effect="slide"
                                                pattern="dd/MM/yyyy" navigator="true" maxlength="10"></p:calendar> 
                                </p:column>
                            </p:row>                                          
                        </p:panelGrid>

                        <p:column><p:commandButton value="Limpiar" icon="ui-icon-arrow-4-diag" action="#{beanConsultaCitas.limpiarAntiguas()}"
                                                   update=":form_conci"  style="margin-left: 520px" /></p:column>                    
                        <p:column><p:commandButton value="Consultar"  icon="ui-icon-zoomin" action="#{beanConsultaCitas.consultarAntiguas()}"
                                                   update=":form_conci"/></p:column>                        
                    </p:fieldset>     



                    <p:dataTable id="dataTableAntiguas" var="cita" style="width: 750px" 
                                 rows="5" value="#{beanConsultaCitas.listado_citas_antiguas}"                           
                                 rowsPerPageTemplate="5,10,15"                                  
                                 rowKey="#{cita.nombre_cliente}"
                                 paginator="true"
                                 filterEvent="enter"
                                 paginatorPosition="bottom">  

                        <p:column headerText="#{label['cliente']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.nombre_cliente}" />  
                        </p:column>  

                        <p:column headerText="#{label['usuario']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.nombre_usuario}" />  
                        </p:column> 
                        <p:column headerText="#{label['fecha']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.fechareal}" >
                                <f:converter converterId="DateConverter" />
                                <f:attribute name="patron" value="dd/MM/yyyy"/>  
                            </h:outputText>  
                        </p:column>
                        <p:column headerText="#{label['hora']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.hora}" />  
                        </p:column>
                        <p:column headerText="#{label['estado']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.dscEstado}" />  
                        </p:column>
                    </p:dataTable>  

                </p:tab>    


                <p:tab title="Citas Actuales">

                    <p:fieldset id="fiel_act" legend="Datos Consulta">
                        <p:panelGrid>
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['plan.pago']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_plan_act" value="#{beanConsultaCitas.planAct}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_planes}" 
                                                       var="pago" itemLabel="#{pago.nombre}" itemValue="#{pago.id_plan_pago}"/>           
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>           
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['especialidades']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_espe_act" value="#{beanConsultaCitas.especialidadAct}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_especialidades}"   
                                                       var="espe" itemLabel="#{espe.nombre}" itemValue="#{espe.id_especialidad}"/>          
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>                                   
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                                </p:column>  
                                <p:column>
                                    <p:selectOneMenu id="id_estado_act" 
                                                     effect="fold"
                                                     style="width: 150px;"
                                                     value="#{beanConsultaCitas.estadoAct}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado_cita}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row> 

                        </p:panelGrid>
                        <p:column><p:commandButton value="Limpiar" icon="ui-icon-arrow-4-diag" action="#{beanConsultaCitas.limpiarActuales()}"
                                                   update=":form_conci"  style="margin-left: 520px" /></p:column>                    
                        <p:column><p:commandButton value="Consultar"  icon="ui-icon-zoomin" action="#{beanConsultaCitas.consultarActuales()}"
                                                   update=":form_conci"/></p:column>                                  
                    </p:fieldset>                                

                    <p:dataTable id="dataTableActuales" var="cita" style="width: 750px" 
                                 rows="5" value="#{beanConsultaCitas.listado_citas_actuales}"                           
                                 rowsPerPageTemplate="5,10,15" selectionMode="single" 
                                 selection="#{beanConsultaCitas.modelo_citas_actuales}"
                                 rowKey="#{cita.nombre_cliente}"
                                 paginator="true"
                                 filterEvent="enter"
                                 paginatorPosition="bottom">  

                        <p:ajax  event="rowSelect"  update=":form_conci:id_cambios_actuales" 
                                 listener="#{beanConsultaCitas.modificarActuales()}"  oncomplete="id_cit_act.show();"/>

                        <p:column headerText="#{label['cliente']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.nombre_cliente}" />  
                        </p:column>  

                        <p:column headerText="#{label['usuario']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.nombre_usuario}" />  
                        </p:column> 
                        <p:column headerText="#{label['fecha']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.fechareal}" >
                                <f:converter converterId="DateConverter" />
                                <f:attribute name="patron" value="dd/MM/yyyy"/>  
                            </h:outputText>  
                        </p:column>
                        <p:column headerText="#{label['hora']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.hora}" >
                            <f:converter converterId="DateConverter" />
                                <f:attribute name="patron" value="HH:mm:ss"/>  
                            </h:outputText>  
                        </p:column>
                        <p:column headerText="#{label['estado']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.dscEstado}" />  
                        </p:column>
                    </p:dataTable>   

                </p:tab>                         




                <p:tab title="Citas Próximas">

                    <p:fieldset id="fiel_pro" legend="Datos Consulta">
                        <p:panelGrid>
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['plan.pago']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_plan_pro" value="#{beanConsultaCitas.planPro}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_planes}"   
                                                       var="pago" itemLabel="#{pago.nombre}" itemValue="#{pago.id_plan_pago}"/>           
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>           
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['especialidades']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_espe_pro" value="#{beanConsultaCitas.especialidadPro}" 
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_especialidades}"      
                                                       var="espe" itemLabel="#{espe.nombre}" itemValue="#{espe.id_especialidad}"/>          
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>                                   
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                                </p:column>  
                                <p:column>
                                    <p:selectOneMenu id="id_estado_pro" 
                                                     effect="fold"
                                                     style="width: 150px;"
                                                     value="#{beanConsultaCitas.estadoPro}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaCitas.lista_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado_cita}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>                                           
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['fecha']}" />               
                                </p:column>
                                <p:column>
                                    <p:calendar style="width:10px" id="input_fecha_pro" mindate="#{beanConsultaCitas.fecha_maxima}"
                                                readonlyInput="true" value="#{beanConsultaCitas.fechaPro}" effect="slide"
                                                pattern="dd/MM/yyyy" navigator="true" maxlength="10"></p:calendar> 
                                </p:column>
                            </p:row>     
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['notificaciones']}" />               
                                </p:column>                                
                                <p:column>                        
                                    <p:commandButton icon="ui-icon-mail-closed" title="Notificaciones" update=":form_conci"
                                                     action="#{beanConsultaCitas.enviarNotificaciones()}">
                                    </p:commandButton>                                                     
                                </p:column>                                   
                            </p:row>                              
                        </p:panelGrid>
                        <p:column><p:commandButton value="Limpiar" icon="ui-icon-arrow-4-diag" action="#{beanConsultaCitas.limpiarProximas()}"
                                                   update=":form_conci"  style="margin-left: 520px" /></p:column>                    
                        <p:column><p:commandButton value="Consultar"  icon="ui-icon-zoomin" action="#{beanConsultaCitas.consultarProximas()}"
                                                   update=":form_conci"/></p:column>          
                    </p:fieldset>                                

                    <p:dataTable id="dataTableProximas" var="cita" style="width: 750px" 
                                 rows="5" value="#{beanConsultaCitas.listado_citas_proximas}"                           
                                 rowsPerPageTemplate="5,10,15" selectionMode="single" 
                                 selection="#{beanConsultaCitas.modelo_citas_proximas}"
                                 rowKey="#{cita.nombre_cliente}"
                                 paginator="true"
                                 filterEvent="enter"
                                 paginatorPosition="bottom">  

                        <p:ajax  event="rowSelect"  update=":form_conci:id_cambios_proximos" 
                                 listener="#{beanConsultaCitas.modificarproximas()}"   oncomplete="id_cit_pro.show();"/>                        

                        <p:column headerText="#{label['cliente']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.nombre_cliente}" />  
                        </p:column>  

                        <p:column headerText="#{label['usuario']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.nombre_usuario}" />  
                        </p:column> 
                        <p:column headerText="#{label['fecha']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.fechareal}">
                                <f:converter converterId="DateConverter" />
                                <f:attribute name="patron" value="dd/MM/yyyy"/>  
                            </h:outputText>  
                        </p:column>
                        <p:column headerText="#{label['hora']}" filterBy="" filterMatchMode="contains">                      
                            <h:outputText value="#{cita.hora}">
                            <f:converter converterId="DateConverter" />
                                <f:attribute name="patron" value="HH:mm:ss"/>  
                            </h:outputText>  
                        </p:column>
                        <p:column headerText="#{label['estado']}" filterBy="" filterMatchMode="contains" filterOptions="" >                      
                            <h:outputText value="#{cita.dscEstado}" />  
                        </p:column>
                    </p:dataTable>  

                </p:tab>                         

            </p:tabView> 
        </h:panelGrid>

        <p:dialog id="id_cambios_actuales" header="Cambios citas actuales" widgetVar="id_cit_act" 
                  showEffect="clip" hideEffect="explode" modal="true">  
            <p:fieldset id="fiel_act" legend="Cita de: #{beanConsultaCitas.modelo_citas_actuales_select.nombre_cliente}">
                <p:panelGrid>                                 
                    <p:row>
                        <p:column>                           
                            <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                        </p:column>  
                        <p:column>
                            <p:selectOneMenu id="id_estado_act" 
                                             effect="fold"
                                             style="width: 157px;"
                                             value="#{beanConsultaCitas.modelo_citas_actuales_select.id_estado_cita}" 
                                             >
                                <f:selectItem itemLabel="" itemValue="0"/>
                                <f:selectItems value="#{beanConsultaCitas.lista_estados}"
                                               var="estado"
                                               itemLabel="#{estado.nombre}"
                                               itemValue="#{estado.id_estado_cita}" />                                    
                            </p:selectOneMenu>   
                        </p:column>
                    </p:row> 
                    <p:row>
                        <p:column>
                            <h:outputText  styleClass="etiqueta" value="#{label['fecha']}" />               
                        </p:column>
                        <p:column>
                            <p:calendar style="width:10px" id="id_fecha" effect="slide"
                                        mindate="#{beanConsultaCitas.fecha_actual}"
                                        readonlyInput="true" value="#{beanConsultaCitas.modelo_citas_actuales_select.fechareal}"
                                        pattern="dd/MM/yyyy" navigator="true" maxlength="10"></p:calendar> 
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column>
                            <h:outputText  styleClass="etiqueta" value="#{label['hora']}" />               
                        </p:column>
                        <p:column>
                            <p:calendar  id="id_hora_cita" maxlength="8" 
                                         style="width: 65px;" value="#{beanConsultaCitas.modelo_citas_actuales_select.hora}"
                                         onkeypress="javascript:return soloNumeros(event)" 
                                         readonlyInput="true" effect="slide" minHour="8"
                                         pattern="HH:mm:ss" showButtonPanel="false"
                                         timeOnly="true">
                            </p:calendar>
                        </p:column>
                    </p:row>


                </p:panelGrid>                 
                <p:column><p:commandButton value="Guardar" style="margin-left: 230px"  icon="ui-icon-disk" action="#{beanConsultaCitas.guardarActuales()}"
                                           update=":form_conci" onclick="id_cit_act.hide();"/></p:column>                                  
            </p:fieldset>                          
        </p:dialog>  


        <p:dialog id="id_cambios_proximos" header="Cambios citas próximas" widgetVar="id_cit_pro" 
                  showEffect="clip" hideEffect="explode" modal="true" >  
            <p:fieldset id="fiel_pro" legend="Cita de: #{beanConsultaCitas.modelo_citas_proximas_select.nombre_cliente}">
                <p:panelGrid>                                  
                    <p:row>
                        <p:column>                           
                            <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                        </p:column>  
                        <p:column>
                            <p:selectOneMenu id="id_estado_pro" 
                                             effect="fold"
                                             style="width: 157px;"
                                             value="#{beanConsultaCitas.modelo_citas_proximas_select.id_estado_cita}" 
                                             >
                                <f:selectItem itemLabel="" itemValue="0"/>
                                <f:selectItems value="#{beanConsultaCitas.lista_estados}"
                                               var="estado"
                                               itemLabel="#{estado.nombre}"
                                               itemValue="#{estado.id_estado_cita}" />                                    
                            </p:selectOneMenu>   
                        </p:column>
                    </p:row> 
                    <p:row>
                        <p:column>
                            <h:outputText  styleClass="etiqueta" value="#{label['fecha']}" />               
                        </p:column>
                        <p:column>
                            <p:calendar style="width:10px" id="id_fecha_pro" effect="slide"
                                        mindate="#{beanConsultaCitas.fecha_actual}"
                                        readonlyInput="true" value="#{beanConsultaCitas.modelo_citas_proximas_select.fechareal}"
                                        pattern="dd/MM/yyyy" navigator="true" maxlength="10"></p:calendar> 
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column>
                            <h:outputText  styleClass="etiqueta" value="#{label['hora']}" />               
                        </p:column>
                        <p:column>
                            <p:calendar  id="id_hora_pro" maxlength="8" 
                                         style="width: 65px;" value="#{beanConsultaCitas.modelo_citas_proximas_select.hora}"
                                         onkeypress="javascript:return soloNumeros(event)" 
                                         readonlyInput="true" effect="slide" minHour="8"
                                         pattern="HH:mm:ss" showButtonPanel="false"
                                         timeOnly="true">
                            </p:calendar>
                        </p:column>
                    </p:row>


                </p:panelGrid>                 
                <p:column><p:commandButton value="Guardar" style="margin-left: 230px" icon="ui-icon-disk" action="#{beanConsultaCitas.guardarProximas()}"
                                           update=":form_conci" onclick="id_cit_pro.hide();"/></p:column>                                  
            </p:fieldset>                          
        </p:dialog>                         

    </ui:define>
</ui:decorate>
